<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>粘性定位</title>
	</head>
	<body>
		<!-- 粘性定位
		 position:sticky
		 基于浏览器滚动的位置，到那个位置就会不动
		 定位以后原位置保留的
		 必须配合top left right bottom其中一个才能生效
		 -->
		 <style type="text/css">
		 	.wrap {
				width: 1200px;
				margin: 0 auto;
				text-align: center;
				
			}
			h1 {
				/* 粘性定位 */
				margin-top: 200px;
				line-height: 80px;
				position: sticky;
				top: 0;
				background-color: #0077AA;
			}
			.aticle {
				padding-bottom: 1200px;
			}
		 </style>
		 
		 <div class="wrap">
			 <h1>sticky 粘性定位</h1>
			 <p class="aticle"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero cum blanditiis similique sed incidunt facere minus suscipit vel deserunt placeat tempora veritatis amet modi illum corrupti dolores possimus animi voluptates.</span>
			 <span>Iste explicabo quibusdam nesciunt odit consequuntur hic in nulla impedit qui porro minima reprehenderit non officiis alias placeat minus ullam. Autem nam assumenda quis saepe animi expedita corporis voluptatibus mollitia.</span>
			 <span>Praesentium neque officiis quis dignissimos repellendus distinctio expedita temporibus vel veniam suscipit ducimus sequi blanditiis ipsam deserunt doloremque aliquid velit! Reprehenderit ipsam necessitatibus reiciendis quam voluptatum nesciunt magni consequuntur amet.</span>
			 <span>Facere nihil ipsum hic non harum doloremque inventore dolorem repellat fugit praesentium labore consectetur dignissimos voluptatem distinctio deserunt. Repellat numquam aspernatur ducimus quo similique modi accusamus distinctio doloribus eum beatae.</span>
			 <span>A ex consectetur possimus quisquam voluptatum distinctio reprehenderit similique atque alias placeat tenetur est dolorum culpa voluptatibus pariatur iure nihil mollitia odit nam reiciendis modi molestias recusandae! Eligendi nihil accusamus.</span></p>
		 </div>
	</body>
</html>
